<script setup>
import { ref , onMounted} from "vue";
import { useStore } from "vuex";
import { useUpdateFriendDynamicReadStatus , useGetFriendDynamic , useGetFriendDynamicByID } from "@/hooks/friend-dynamic-hook"

const list = ref([]);
const list2 = ref([])
const store = useStore();
const user = store.state.user;
const dynamic = store.state.dynamic;
const loading = ref(false);
const finished = ref(false);
const show = ref(false);
const spaceName = ref("我") 

onMounted(() => {
    if(dynamic.newDynamicCount > 0){
      useUpdateFriendDynamicReadStatus(store,user.userInfo._id);
    }
})

const onLoad = () => {
  useGetFriendDynamic(finished,loading,list2,user.userInfo._id)
};

const loadPointFriendDynamic = (_id,name) => {
      spaceName.value = name; 
      show.value = true;
      useGetFriendDynamicByID(finished,loading,list,_id);
}

const load = (e,img) => {
  e.target.src = img;
}

</script>

<template>
  <div class="friend_dynamic">
    <van-popup
      v-model:show="show"
      position="bottom"
      closeable
      :style="{ height: '90%' }"
    >
      <template #default>
        <van-cell :title="spaceName + '的空间'"/>
        <div class="dynamic_info" v-for="item in list">

          <div class="d_avatar">
            <div class="d_avatar_faceImg">
              <img
                :src="item.dynamic_user_avatar"
                alt=""
              />
            </div>
            <div class="d_avatar_dynmaicInfo">
              <div class="uname"> {{  }} </div>
              <div class="date"> {{ new Date(item.dynamic_date).toLocaleDateString() }} </div>
            </div>
          </div>
          <div class="d_title">
             {{ item.dynamic_content }}
          </div>
          <div class="d_imgs">
            <div class="img" v-for="img in item.dynamic_imgs">
              <img
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fdownload.yxybb.com%2Finsy%2Fbaoyi%2Fimages%2Fonloadgif.gif&refer=http%3A%2F%2Fdownload.yxybb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655056698&t=e5a3aae1e64ab2bd9c03fcebb21d44fb"
                alt=""
                @load="load($event,img)"
                onerror="this.src='https://img2.baidu.com/it/u=1076487357,533189325&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=500';this.οnerrοr=null"
              />
            </div>
          </div>
          <div class="d_action"></div>
        </div>
      </template>
    </van-popup>
    <div class="head_bg">
      <img
        @click="loadPointFriendDynamic(user.userInfo._id,'我')"
        :src="user.userInfo.avatar"
        alt=""
      />
    </div>
    <van-grid direction="horizontal" :column-num="2">
      <van-grid-item icon="comment-o" to="/write_dynamic" text="说说" />
      <van-grid-item icon="fire-o" to="/draw" text="一起画画" />
    </van-grid>

    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有好友发布动态啦~"
      @load="onLoad"
    >
      <div class="dynamic_info" v-for="item in list2">
        <div class="d_avatar">
          <div class="d_avatar_faceImg">
            <img
               @click="loadPointFriendDynamic(item.dynamic_creator_id,item.dynamic_creator_name)"
               :src="item.dynamic_user_avatar"
              alt=""
            />
          </div>
          <div class="d_avatar_dynmaicInfo">
           <div class="uname"> {{ item.dynamic_creator_name }} </div>
              <div class="date"> {{ new Date(item.dynamic_date).toLocaleDateString() }} </div>
          </div>
        </div>
        <div class="d_title">
           {{ item.dynamic_content }}
        </div>
        <div class="d_imgs">
          <div class="img" v-for="img in item.dynamic_imgs">
              <img
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fdownload.yxybb.com%2Finsy%2Fbaoyi%2Fimages%2Fonloadgif.gif&refer=http%3A%2F%2Fdownload.yxybb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655056698&t=e5a3aae1e64ab2bd9c03fcebb21d44fb"
                alt=""
                @load="load($event,img)"
                onerror="this.src='https://img2.baidu.com/it/u=1076487357,533189325&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=500';this.οnerrοr=null"
              />
            </div>
        </div>
        <div class="d_action"></div>
      </div>
    </van-list>
  </div>
</template>

<style lang="scss" scoped>
.friend_dynamic {
  box-sizing: border-box;
  background-color: #eee;
  .dynamic_info {
    margin-top: 10px;
    background: white;
    padding: 15px 10px;
    .d_avatar {
      display: flex;
      height: 40px;
      &_faceImg {
        width: 40px;
        height: 100%;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      &_dynmaicInfo {
        flex: 1;
        display: flex;
        flex-direction: column;
        .uname,
        .date {
          width: 100%;
          flex: 1;
          padding-left: 10px;
          line-height: 20px;
        }
        .uname {
          margin-top: 2px;
        }
        .date {
          color: #ccc;
          font-size: 12px;
        }
      }
    }
    .d_title {
      padding-top: 10px;
      font-size: 14px;
    }
    .d_imgs {
      width: 100%;
      height: auto;
      display: flex;
      padding-top: 5px;
      flex-wrap: wrap;
      .img {
        // 需要动态计算
        width: 33%;
        display: block;
        height: auto;
        box-sizing: border-box;
        padding: 2.5px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
.head_bg {
  width: 100vw;
  height: 250px;
  position: relative;
  background: url("http://p2.qhimg.com/bdm/768_474_0/t019ca75cd449be50c1.jpg")
    no-repeat center center;
  background-size: cover;
  img {
    width: 80px;
    height: 80px;
    position: absolute;
    bottom: 20px;
    border-radius: 50%;
    left: 20px;
  }
}
</style>
